<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>千锋选课系统</title>
    <style type="text/css">
        select {
            width: 200px;
            height: 350px;
        }

        input {
            position: absolute;
            width: 100px;
            margin-left: -150px;
        }
    </style>
</head>

<body>
    <center>
        <fieldset style="width:800px;">
            <legend>请选择课程</legend>
            <br>
            <select id="leftSelect" multiple="multiple" size="23" style="margin-right:200px;" ondblclick="right();">
                <option>职场新动力英语1</option>
                <option>职场新动力英语2</option>
                <option>职场新动力英语3</option>
                <option>职场新动力数学1</option>
                <option>职场新动力数学2</option>
                <option>职场新动力数学3</option>
                <option>计算机基础</option>
                <option>网页设计</option>
                <option>C语言程序设计</option>
                <option>vue</option>
                <option>react</option>
                <option>uni-app</option>
                <option>node.js/CMS案例</option>
                <option>数据结构与算法</option>
                <option>小程序/计算机视觉/Mybatis</option>
                <option>springMVC/SSH/WebService</option>
                <option>项目实训1</option>
                <option>项目实训2</option>
                <option>项目实训3</option
            </select>
                <input type="button" value="→ 添加 →" style="margin-top:50px;" onclick="right();">
                <input type="button" value="← 删除 ←" style="margin-top:100px;" onclick="left();">
                <input type="button" value="↑ 上移 ↑" style="margin-top:150px;" onclick="up();">
                <input type="button" value="↓ 下移 ↓" style="margin-top:200px;" onclick="down();">
                <input type="button" value="取消左选" style="margin-top:250px;" onclick="cancelLeft()	;">
                <input type="button" value="取消右选" style="margin-top:300px;" onclick="cancelRight();">

                <select id="rightSelect" multiple="multiple" size="23" ondblclick="left();" onclick="cancelLeft();">
                </select>
                <br>
                <br>
        </fieldset>
    </center>

    <script>
        var leftselect = document.getElementById('leftSelect');
        var rightSelect = document.getElementById('rightSelect');

        // console.log(leftselect.options); // 获取select框所有的选项 
        // console.log(leftselect.options[0].selected); //判断是否选中  
        // console.log(leftselect.options[1].selected);

        function right(){
            // 判断左边哪些被选中   如果被选中 就把这些选项放到右边   
            // 遍历左边每个选项   
            for(var i=leftselect.options.length-1;i>=0;i--){
                // i是下标  
                if(leftselect.options[i].selected){
                    rightSelect.appendChild(leftselect.options[i])
                }
            }
        }


        function left(){
            // 判断左边哪些被选中   如果被选中 就把这些选项放到右边   
            // 遍历左边每个选项   
            for(var i=rightSelect.options.length-1;i>=0;i--){
                // i是下标  
                if(rightSelect.options[i].selected){
                    leftselect.appendChild(rightSelect.options[i])
                }
            }
        }

        function up(){
            // 找到选中元素的 哥哥 元素节点
            // 父节点.insertBefore(左边被选中的,哥哥元素);
            for(var i=0;i<leftselect.options.length;i++){
                // i是下标  
                if(leftselect.options[i].selected){
                    if(i==0){
                        return;   // 防止越界 到第一个之后不能再往上了
                    }
                    leftselect.insertBefore(leftselect.options[i],leftselect.options[i].previousElementSibling)
                }
            }
        }


        function down(){
            // 找到选中元素的 弟弟元素节点
            // 父节点.insertBefore(弟弟元素,左边被选中的);
            // for(var i=leftselect.options.length-1;i>=0;i--){
            //     // i是下标  
            //     //i 0 
            //     if(leftselect.options[i].selected){
            //         if(i==leftselect.options.length-1){
            //             return;   // 防止越界 到最后一个之后不能再往下了
            //         }
            //         console.log(leftselect.options[i].nextElementSibling);
            //         leftselect.insertBefore(leftselect.options[i].nextElementSibling,leftselect.options[i]);
            //     }
            // }

            for(var i=0;i<leftselect.options.length;i++){
                // i是下标  
                //i 0 
                if(leftselect.options[i].selected){
                    if(i==leftselect.options.length-1){
                        return;   // 防止越界 到最后一个之后不能再往下了
                    }
                    console.log(leftselect.options[i].nextElementSibling);
                    leftselect.insertBefore(leftselect.options[i].nextElementSibling,leftselect.options[i]);
                    break
                }
            }
        }
    </script>
</body>

</html>